1. Solution 1 : get one by one using id or class

in view, add id to each field

                    <form id="frm_reg" method="POST" action="">
                      <input type="text" id="name" name="name">
                      <input type="text" id="email" name="email">
                      <input type="text" id="mobile" name="mobile">
                      <button type="button" id="btn_save" >Submit</button>
                    </form>
                  

in jquery

1. get value of fields using id
2. check value is null
3. if error==1 , show error message
4. if error ==0, submit form

                  $("#btn_save").click(function(){
                      var error=0;
                      var name=$('#name').val();
                      var email=$('#email').val();
                      var mobile=$('#mobile').val();

                      if(name==''){
                        error=1;
                      }

                      if(email==''){
                        error=1;
                      }

                      if(mobile==''){
                        error=1;
                      }

                      if(error==1){
                        alert("Please fill mandatory fields");
                        return false;
                      }
                      else{
                          $('#frm_reg').submit();
                          return true;
                      }

                  });
                  

2. Solution 2 : dynamic validation

in view, add 'mandatory' class to each field instead of id

                    <form id="frm_reg" method="POST" action="">
                      <input type="text" class="mondatory" name="name">
                      <input type="text" class="mondatory" name="email">
                      <input type="text" class="mondatory" name="mobile">
                      <button type="button" id="btn_save" >Submit</button>
                    </form>
                  

in jquery

                  $("#btn_save").click(function(){
                    var error=0;
                    $('.mandatory').each(function(index, obj){
                          if(obj.value==''){           
                            
                              error=1;		                                  
                            
                          }
                      });

                      if(error==0){
                        $("#frm_reg").submit();
                      }
                      else{
                        alert("Please fill mandatory fields");
                        return false;
                      }

                  });

                

Advanced options

Validatioon based on input type

                <div class="col-md-4">
                                                    <div class="form-group">
                                                         <div><label for="exampleInputEmail1">Environment Culture Drawn <span style="color:red">*</span></label></div>
                                                        <span class="radio-inline">
                                                          <input type="radio" class="mandatory " data-message="Please select Environment Culture Drawn"  name="environment_culture_drawn" value="Y" <?php  echo   $content['environment_culture_drawn']=="Y" ? "checked" : "" ?> &nbsp;Yes
                                                        </span>
                                                        <span class="radio-inline">
                                                          <input type="radio" name="environment_culture_drawn" value="N"  <?php echo $content['environment_culture_drawn']=="N" ? "checked" : "" ?>&nbsp;No
                                                        </span>
                                                        <span class="radio-inline">
                                                          <input type="radio" name="environment_culture_drawn" value="NA"  <?php echo $content['environment_culture_drawn']=="NA" ? "checked" : "" ?>&nbsp;NA
                                                        </span>
                                                        <div class="errormessage"></div>
                                                    </div>
                              </div>

                

$( "#btn_save" ).click(function() {
    var error=0;
	  $('.mandatory').each(function(index, obj){
         switch(obj.type){
            case 'radio':
                
                if ($('input[name='+ obj.name +']:checked').length > 0) {

                }
                else{
                    $(obj).parent().parent().find('.errormessage').show();			
                    $(obj).parent().parent().find('.errormessage').text($(obj).data('message'));               
                    error=1;
                }

            break;
            default:

                if(obj.value==''){            
                    //alert($(obj).data('message'));
                    $(obj).next('.errormessage').show();			
                    $(obj).next('.errormessage').text($(obj).data('message'));               
                    error=1;
                }
                
            break;

         }
        
    });

    if(error==0){
        $( "#frm_ticket" ).submit();
    }    

});

switch(obj.type) is used to identify the input type

Alert styling

in view

<div class="errormessage"></div>

in css

<style>

.errormessage {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
    color: #fff;
    font-weight: bold;
    position: absolute;
  
    line-height: 16px;
    padding: 8px 12px;
    font-size: 12px;
    background: #e6ab9e;
    -webkit-box-shadow: rgba(0,0,0,0.05) 1px 1px 2px 0;
    box-shadow: rgba(0,0,0,0.05) 1px 1px 2px 0;
    z-index: 3;
    -webkit-border-radius: 3px;
    border-radius: 3px; 
    margin-top: 8px;
    pointer-events: none !important;
    display:none;
  }
  input:focus + .help{
    display:block;
  }
  .errormessage::after{
    content:"";
    position:absolute;
    width:0;
    height:0;
    border-width:5px;
    border-style:solid;
    border-color:transparent transparent #e6ab9e;
    bottom:100%;  
    left:0px;
  }
  </style>